<template>
  <view class="myorderbox">
    <view class="switchbox">
      <u-tabs
          :list="tousu_tabslist"
          :current="tousu_tabs"
          lineWidth="40"
          lineColor="#AB87EF"
          :activeStyle="{color: '#8E8E8E',transform: 'scale(0.9)'}"
          :inactiveStyle="{color: '#8E8E8E',transform: 'scale(0.9)'}"
          @click="tousu_tabsclick">
      </u-tabs>
<!--      <uni-data-checkbox mode="tag" v-model="tousu_tabs" :localdata="tousu_tabslist"-->
<!--                         @change="tousu_tabsclick"></uni-data-checkbox>-->
    </view>
    <view class="goods-list">
      <view v-if="tousu_List.length>0" class="goods-list-item" v-for="(item,i) in tousu_List" :key="i">
        <view class="leftbox"  >
          <view class="imgbox">
            <!-- <image mode="widthFix" :src="mediaUrl+item.icon"></image> -->

			<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="1000"
				:duration="duration">
				<swiper-item v-for="(img,v) in item.imagelist" :key="v">
					<view @click="fangda(img)" class="xy">
						<image mode="scaleToFill" :src="img"></image>
					</view>
				</swiper-item>

			</swiper>
          </view>
          <view class="content">
				<view>举报人：{{item.tou_user}}</view>
				<view>被举报人：{{item.bei_user}}</view>
				<view>举报原因：{{item.reson}}</view>
				<view>举报时间：{{item.tou_date}}</view>

          </view>
        </view>
        <!-- 交易业务逻辑 -->
        <view class="rightbox" v-if="item.state=='0'">
          <view class="top">审核中</view>
          <view class="bottom">
            <u-button type="primary" @click.stop="tousuyes_check(item)">同意</u-button>
            <u-button type="primary" @click.stop="tousuno_check(item)">拒绝</u-button>
          </view>
        </view>
        <view class="rightbox" v-if="item.state=='1'">
          <view class="top">已同意</view>
        </view>
		<view class="rightbox" v-if="item.state=='2'">
		  <view class="top">已拒绝</view>
		</view>


      </view>
      <view v-if="tousu_List.length==0" class="shoproempty">
        <shopro-empty :image="mediaUrl + '/media/image/empty_goods.png'" tipText="暂无~"></shopro-empty>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "complaintReview",
  data(){
    return{
      tousu_tabs: 0,
      tousu_tabslist: [{
        name: '待审核',
        value: 0
      }, {
        name: '已同意',
        value: 1
      }, {
        name: '已拒绝',
        value: 2
      }, ],
      tousu_List: [],
      mediaUrl: uni.$http.mediaUrl,
    }
  },
  onLoad(e) {},
  onShow(){
    self = this
    switch (this.tousu_tabs) {
      case 0:
        this.tousu_updateList(0);
        break
      case 1:
        this.tousu_updateList(1);
        break
      case 2:
        this.tousu_updateList(2);
        break
    }
  },
  methods:{
	  // 举报不成立
	  async tousuno_check(item) {
	  	const postmsg = {
	  		id: item.id,
	  		check: 2
	  	}
	  	const {
	  		data: res
	  	} = await uni.$http.post('tousuCheck/', postmsg)
	  	if (res.code == 200) {
	  		uni.showToast({
	  			title: '成功',
	  			icon: 'success',
	  			duration: 2000
	  		});
	  		this.tousu_updateList(0)
	  	} else {
	  		uni.showToast({
	  			title: res.msg,
	  			icon: 'none',
	  			duration: 2000
	  		});
	  	}
	  },
	  // 投诉成立
	  async tousuyes_check(item) {
	  	const postmsg = {
	  		id: item.id,
	  		check: 1
	  	}
	  	const {
	  		data: res
	  	} = await uni.$http.post('tousuCheck/', postmsg)
	  	if (res.code == 200) {
	  		uni.showToast({
	  			title: '成功',
	  			icon: 'success',
	  			duration: 2000
	  		});
	  		this.tousu_updateList(0)
	  	} else {
	  		uni.showToast({
	  			title: res.msg,
	  			icon: 'none',
	  			duration: 2000
	  		});
	  	}
	  },
fangda(item) {
				console.log(item)
				// var imgUrl = e;
				wx.previewImage({
					urls: [item], //需要预览的图片http链接列表，注意是数组
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

    tousu_tabsclick(item) {
      // console.log(item.detail.value);
      this.tousu_tabs = item.value;
      switch (item.value) {
        case 0:
        	this.tousu_updateList(0);
        	break;
        case 1:
        	this.tousu_updateList(1);
        	break;
        case 2:
        	this.tousu_updateList(2);
        	break;
      }
    },
	async tousu_updateList(dealstate) {
		const postmsg = {

			check: dealstate
		}
		const {
			data: res
		} = await uni.$http.post('gettousuList/', postmsg)
		// console.log('myPub_update---',res)
		if (res.code == 200) {
			uni.stopPullDownRefresh();//上拉停止刷新

			self.tousu_List = []

			for (let i = 0; i < res.data.length; i++) {
				var obj = {}
				obj.id = res.data[i].id
				obj.tou_user = res.data[i].tou_user
				obj.bei_user = res.data[i].bei_user
				obj.state = res.data[i].state
				obj.imagelist = JSON.parse(res.data[i].imagelist);
				obj.img = obj.imagelist[0]
				obj.reson = res.data[i].reson
				obj.date = res.data[i].date
				obj.tou_date = res.data[i].tou_date

				this.tousu_List.push(obj)
			}

		}
	},

  }
}
</script>

<style lang="scss">
.imgbox {
  width: 200rpx;
  height: 130px;
  border-radius: 1px;
}
.u-tabs{
  width: 100%;
}
.u-tabs__wrapper__nav__item {
  color: #8E8E8E;
  font-size: 24rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  width: 190rpx;
  height: 72rpx !important;
  border: 1px solid #BEBEBE;

  &:first-child {
    border-radius: 40rpx 0 0 40rpx;
  }

  &.u-tabs__wrapper__nav__item-2 {
    border-radius: 0 40rpx 40rpx 0;
  }
}
.myorderbox {
  height: 40px;
  width: 100%;
  margin-top: 20px;

  .switchbox {
    display: flex;
    justify-content: start;
    width: 100%;
    // background-color: #ff0000;
    padding: 0 10px;
    margin-bottom: 40rpx;
  }

  .goods-list {
    // background-color: #ff0000;
    height: 100%;

    .goods-list-item {
      // background-color: aquamarine;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 5px 4px;
      box-sizing: border-box;
      border-top: 2px solid #eaeaea;
      border-bottom: 2px solid #eaeaea;
      border-left: 2px solid #eaeaea;

      .leftbox {
        // background-color: #00ff00;
        display: flex;

        .imgbox {
          image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 1px;
          }

          swiper {
            height: 120px;
            // width: 100%;
          }
        }

        .content {
          margin-left: 5px;
          font-size: 12px;
          width: 46vw;
          :nth-child(1) {
            font-weight: bold;
          }
        }
      }

      .rightbox {
        max-width: 80px;
        min-width: 80px;
        // background-color: #0000ff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top {
          font-weight: bold;
          font-size: 12px;
          color: #e34e4e;
        }

        .bottom {
          font-size: 12px;
          color: #fff;
          // background-color: #169bd5;
          border-radius: 5px;
          text-align: center;
          display: flex;
          flex-direction: column;

          :nth-child(1) {
            height: 26px;
          }

          :nth-child(2) {
            height: 26px;
            margin-top: 6px;
          }

          :nth-child(3) {
            height: 26px;
            margin-top: 6px;
          }
        }
      }
    }

    .shoproempty {
      // background-color: #ff0000;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .upopupbox {
    width: 600rpx;
    padding-bottom: 50rpx;
    margin-top: 0px;
    padding: 30rpx 30rpx;
    box-sizing: border-box;

    .titlebox {
      font-size: 18px;
      display: flex;
      justify-content: center;
    }

    .codebox {
      margin-top: 40rpx;
      margin-bottom: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #545454;

      input {
        background-color: #lightgray;
        width: 160px;
        padding: 4px;
        margin-left: 10px;
      }
    }

    .buttonbox {
      margin-bottom: 10rpx;
      background: -webkit-linear-gradIEnt(left,#6C64D0,#8481C8)!important;
    }
  }
}

</style>
